<template>
  <div class="box">
    <div class="head-search">
      <search @onSubmit="onSearch">
        <el-form-item label="门类名称">
          <el-input placeholder="请输入内容" clearable v-model="searchData.categoryName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="来源">
          <el-input placeholder="请输入内容" clearable v-model="searchData.source" size="small"></el-input>
        </el-form-item>
      </search>
    </div>
    <section class="list-box">
      <el-table
        :data="tableData"
        border
        v-loading="tableLoading"
        height="calc(100vh - 250px)"
        class="table">
        <el-table-column
          fixed="left"
          align="center"
          type="index"
          label="序号"
          width="60">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="accessUser"
          label="访问用户">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="accessTime"
          label="访问时间"
          :formatter="formatDate"
          width="180">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="interfaceName"
          label="接口名称">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="accessParameter"
          label="访问参数">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="operationIp"
          label="操作IP">
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </section>
  </div>
</template>

<script>
import Search from '../../../../../components/search/search'
import { getInterfaceVisitJournal } from '../../../../../api/logAudit'

export default {
  name: 'apiVisitJournal', // 接口访问日志
  components: { Search },
  data () {
    return {
      tableLoading: true,
      searchData: {
        categoryName: '',
        source: ''
      },
      page: {
        pageNo: 1,
        pageSize: 20,
        total: 0
      },
      tableData: [],
      params: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () {
      this.tableLoading = true
      const param = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        sorters: [{
          asc: false,
          name: 'accessTime'
        }]
      }
      if (this.params.length > 0) {
        param.params = this.params
      }
      await getInterfaceVisitJournal(param).then(res => {
        this.tableData = res.data.data.list
        this.page.total = res.data.data.total
      })
      this.tableLoading = false
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getList()
    },
    onSearch () {
      // 搜索
      this.params = []
      Object.keys(this.searchData).forEach(key => {
        if (this.searchData[key]) {
          this.params.push({
            name: key,
            op: 'like',
            value: this.searchData[key]
          })
        }
      })
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .head-search {
    ::v-deep .search-btn {
      margin-top: 0;
    }
  }
</style>
